<style>
    #right_layer{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .layui-layer-content::-webkit-scrollbar-thumb {
        background-color: #565e64;
        background-clip: content-box;
        border: 1px solid transparent;
    }
    .layui-layer-content::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .message-list{
        margin-top: 15px;
        overflow-y: auto;
        flex: 1 1 auto;
    }
    .message-list li {
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: all .3s ease-in 0s;
    }
    .message-list li:before {
        content: "";
        position: absolute;
        width: 1px;
        height: calc(100% - 32px);
        top: calc(50% - 16px);
        background-color: #0052d9;
        left: 24px;
    }
    .message-list li.read {
        transition: all .3s ease-in 0s;
    }
    .message-list li.read:before {
        background-color: #e6e9ef;
    }
    .message-list li:hover {
        background-color: #f2f4f8;
    }
    .message-item{
        padding: 13px 24px 13px 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        font-size: 12px;
        transition: all .3s ease-in 0s;
    }

    .message-list li .message-item-body, .message-list li .message-item-header {
        display: flex;
        justify-content: space-between;
    }
    .message-list li .message-item-body {
        margin-top: 4px;
    }
    .message-item-name {
        color: rgba(0,0,0,0.5);
        font-weight: 400;
    }
    .message-list li .message-item-info {
        display: flex;
    }
    .message-list li .message-item-time {
        color: rgba(0,0,0,0.3);
        line-height: 20px;
    }
    .message-list li .message-item-btn {
        color: #fff;
        display: none;
    }
    .message-list li:hover .message-item-btn {
        display: block;
    }

</style>
<ul class="message-list">
    {{# layui.each(d, function(index, item){ }}
    <li class="{{ item.status === 1 ? 'read' : '' }}">
        <a class="message-item" href="javascript:;" lay-message-event="message" style="text-decoration: none;" data-msgId="{{item.id}}"  title="{{ item.title }}">
            <div class="message-item-header">
                <div class="message-item-name">{{ item.title }}</div>
                <button class="layui-btn layui-btn-xs layui-btn-normal message-item-btn {{ item.status === 0 ? '' : 'layui-hide' }}" >标为已读</button>
            </div>
            <div class="message-item-body">
                <div class="message-item-info">
                    <div class="message-item-tag">
                        <span class="{{ item.status === 1 ? 'layui-badge layui-bg-cyan' : 'layui-badge' }}">{{ item.title }}</span>
                    </div>
                </div>
                <div class="message-item-time">{{ item.time }}</div>
            </div>
        </a>
    </li>
    {{# }); }}

</ul>

<script type="text/javascript">
    {{#
        top.tools.loadscripts(["/js/page/message/popup_message.js"], function () {
                templateViewInit();
        })
    }}
</script>